/* image */
import { getOssUrl } from '@src/util/assets'
const DefaultHead = getOssUrl('/avatar.png')
export default {
  // 事件和工单在进度条上，工单右侧tab里面展示地址，点击自定义渲染地图的marker,从这些页面拷贝过来的
  name: 'address-mixin',
  data() {
    return {};
  },
  methods: {
    getMark(longitude, latitude, markerContent, infoWindowContent){
      return {
        lat: latitude,
        lng: longitude,
        markerDom: markerContent,
        infoDom: infoWindowContent
      }
    },

    /** 
     * @description 构建用户标记
    */
    renderMarks(record) {
      let { longitude, latitude } = record
      let markers = []
      // 完成时地址
      if (longitude && latitude) {
        let markerContent = `<img class='map-user-head' src=${record.userHead || DefaultHead} />`
        
        let infoWindowContent = `<div class='map-user-name'>${record.userName}</div>`
        let marker = this.getMark(longitude, latitude, markerContent, infoWindowContent)
        
        markers.push(marker)
      }
      
      // 工单客户地址
      let address = this.task.taddress || {};
      let customerLongitude = address.longitude;
      let customerLatitude = address.latitude;
      // let customerLongitude = 120.21357;
      // let customerLatitude = 30.263626;
      if(customerLongitude && customerLatitude) {
        let marker = this.getMark(
          customerLongitude, customerLatitude, this.buildMapMarkerContent(), this.buildMapCustomerInfoContent()
        )
        markers.push(marker)
      }
      
      return markers
    },

    hasLatLng(content){
      const { longitude,latitude } = content || {}
      if(!longitude || !latitude) return false;
      return true
    },


    openMap(content){

      if(!this.hasLatLng(content)) return;
      const { longitude, latitude } = content || {}
      const customMarkList = [ this.getMark(longitude, latitude) ]
      this.mapDisplay(content,customMarkList)
    },

    openMapForFinished(content) {
      console.log(22222)
      const customMarkList = this.renderMarks(content)
      this.mapDisplay(content,customMarkList)
    },


    mapDisplay(content,customMarkList){
      if(!this.hasLatLng(content)) return;

      this.$fast.map.display(
        { ...content },
        { title: this.$t('common.map.locationInfo') },
        undefined,
        undefined,
        customMarkList,
      )
      .catch((err) => {
        console.error('openMap catch an err: ', err);
      });
    },


    buildMapMarkerContent() {
      return `<i class="bm-location-dot"></i><div class="map-address-title">${this.$t('common.base.customerAddress')}</div>`;
    },
    
    buildMapCustomerInfoContent() {
      return `
        <div class="map-info-window-content">
          <div class="customer-name">${this.customer.name || ''}</div>
          <p><label>${this.$t('common.label.contact')}：</label>${this.linkman.lmName || ''}</p>
          <p><label>${this.$t('common.label.phone')}：</label>${this.linkman.lmPhone || ''}</p>
          <p><label>${this.$t('common.label.address')}：</label>${this.address || ''}</p>
        </div>
      `;
    },
  }
}